<template>
    <div class="main">
       
        <FIForm :rules="passwordRules" ref="ruleForm" class="passFrom">
            <h2 class="title">修改密码</h2>
            <FIInput v-model="password.oldPassword" clearable placeholder="旧密码" class="input_css"/>
            <FIInput v-model="password.newPassword" clearable placeholder="新密码" class="input_css"/>
            <FIInput v-model="password.surePassword" clearable placeholder="确认密码" class="input_css"/>
            <FIButton type="primary" :loading="loading" @click="sureClick" class="btn">确定修改</FIButton>
        </FIForm>
    </div>
</template>
<script lang="ts" setup>
import { reactive,ref } from 'vue'
import { apiUpdatePassword } from '@/api/user'
import { useMessage } from '@/hooks/message'
import FIInput from '@/components/FIInput'
import FIButton from '@/components/FIButton'
const password = reactive({
    oldPassword:'',
    newPassword:'',
    surePassword:'',
})
const loading = ref(false)
const passwordRules = reactive({
    oldPassword:[{ required: true, message: '此为必填项', trigger: 'blur' }],
    newPassword:[{ required: true, message: '此为必填项', trigger: 'blur' }],
    surePassword:[{ required: true, message: '此为必填项', trigger: 'blur' }]
})
const base64Encode = (str) => {
    return btoa(str);
}
const sureClick = () =>{
    
    const {newPassword,oldPassword,surePassword} = password
    if(newPassword == oldPassword){
        useMessage().warning('新密码不能与原密码相同！')
        return;
    }
    if(surePassword != newPassword){
        useMessage().warning('两次新密码输入不一致！')
        return;
    }
    const oldPad = base64Encode(oldPassword);
    const newPad = base64Encode(newPassword);
    const obj = {
        loginName: "kangna",
        newPassword:newPad,
        oldPassword:oldPad
    }
    apiUpdatePassword(obj).then((res) =>{
        if(res.data.success){
            useMessage().success(res.data.message)
        }
    }).catch((err) =>{
        useMessage().success(err.data.message)
    })
}
</script>
<style lang="less" scoped>
.main{
    background: #ffffff;
    width:100%;
    height:calc(100vh - 180px);
    text-align: center;
    .passFrom{
        margin:0 auto;
        width: 400px;
        padding-top:160px;
        .title{
            font-size: 25px;
            font-weight: bold;
            margin: 0 auto 30px auto;
        }
        .input_css{
            margin-bottom:20px;
        }
        .btn{
            width: 100%;
            margin-top:50px;
        }
    }
}
</style>